<template>
  <div class="login-container"
       @keyup.enter.native="handleLogin" v-if="loginContShow">
    <top-color v-show="false"></top-color>
    <div class="login-weaper animated bounceInDown">
      <div class="login-left-admin">
        <img style="width:100%;height:100%;" :src="imgSrc" />
      </div>
      <div class="login-border">
        <div class="login-main">
          <div class="login-time" style="color:#000">
            {{time}}
          </div>
          <!--<h4 class="login-title">
            {{ $t('login.title') }}{{website.title}}
            <top-lang></top-lang>
          </h4>-->
          <h4 class="login-title">
            {{ $t('login.title') }}
            <top-lang></top-lang>
          </h4>
          <userLogin v-if="activeName==='user'"></userLogin>
          <codeLogin v-else-if="activeName==='code'"></codeLogin>
          <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
<!--          <div class="login-menu">-->
<!--            <a href="#"-->
<!--               @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>-->
<!--            <a href="#"-->
<!--               @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
<!--            <a href="#"-->
<!--               @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>-->
<!--          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import userLogin from "./userlogin";
import codeLogin from "./codelogin";
import thirdLogin from "./thirdlogin";
import { mapGetters } from "vuex";
import { dateFormat } from "@/util/date";
import { validatenull } from "@/util/validate";
import topLang from "@/page/index/top/top-lang";
import topColor from "@/page/index/top/top-color";
export default {
  name: "login",
  components: {
    userLogin,
    codeLogin,
    thirdLogin,
    topLang,
    topColor
  },
  data () {
    return {
      time: "",
      activeName: "user",
      codeValue:'',
      codeLogin:'',
      loginContShow:true,
      msgShow:'',
      imgUrl:'https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/console_static/console-a.png',
    };
  },
  watch: {
    $route () {
      const params = this.$route.query;
      this.socialForm.state = params.state;
      this.socialForm.code = params.code;
      if (!validatenull(this.socialForm.state)) {
        const loading = this.$loading({
          lock: true,
          text: `${
            this.socialForm.state === "WX" ? "微信" : "QQ"
            }登录中,请稍后。。。`,
          spinner: "el-icon-loading"
        });
        setTimeout(() => {
          loading.close();
        }, 2000);
      }
    }
  },
  computed: {
    ...mapGetters(["tagWel"])
  },
  created () {
    console.log('windowwwww')
    console.log('window',window.location)
    let href=window.location.origin
    if(href=='https://op.sunac.com.cn') {
      this.imgSrc='https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/console_static/console-c.png'
    }else {
      this.imgSrc='https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/console_static/console-a.png'
    }
    function getQueryVariable(variable){
      let query = window.location.search.substring(1);
      let vars = query.split("&");
      for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){return pair[1];}
      }
      return(false);
    }
    this.codeValue = getQueryVariable("rctype");
    this.codeLogin = getQueryVariable("code");
    let rcLoginNum = getQueryVariable("white");
    let codeData = {
      code:this.codeLogin,
      href:href
    }
    console.log('href'+href);
    if(this.codeValue == 'rcIdmLogin'){
      this.loginContShow = false;
      this.$store.dispatch("getLoginUrl");
    }else if(this.codeLogin != ''){
      this.$store.dispatch("getCodeLogin",codeData).then((res) => {
          this.loginContShow = false;
          this.$store.dispatch("getDictionry");
      }).catch(err=>{
        console.log(err)
      });
    }
    if(rcLoginNum){
      this.loginContShow = false
    }


    this.getTime();
    setInterval(() => {
      this.getTime();
    }, 1000);
  },
  mounted () { },
  props: [],
  methods: {
    getTime () {
      this.time = dateFormat(new Date());
    }
  }
};
</script>

<style lang="scss">
@import "@/styles/login.scss";



</style>
